<template>
	<view class="bg-white margin radius borders " style="margin-bottom: 5rpx;overflow: hidden" @tap="">
		<view class="title-text margin-bottom">算法推荐</view>
		<view style="height: 25rpx"></view>
		<view class="cu-list menu card-menu" style="margin-right: auto; margin-left:auto;width: 98%" v-for="(item,index) in algorithmRecommendationList" :key="index" @tap="jumpToAlgorithmDetail(item)">
			<view class="cu-item bg-white arrow ar-item" @tap="">
				<view class="content ar-box">
					<image :src="item.icon" style="padding:3px;width:108upx;" mode="widthFix"></image>
					<view class="ar-text">
						<text class="text-df text-black">{{item.name}}</text>
						<text class="text-sm">{{item.description}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'algorithmSupermarket',
	props: {
	},
	data(){
		return {
			algorithmRecommendationList:null,
		}
	},
	onLoad(opt){
		let enData = decodeURIComponent(opt.algorithmRecommendationList)
		this.algorithmRecommendationList = JSON.parse(enData)
	},
	methods: {
		jumpToAlgorithmDetail(item){
			console.log('item==>',item)
			const {icon1,classifyId} = item
			this.$routing(`${this.$pages.introduce}${icon1}?classifyId=${classifyId}`)
		}
	}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
	.ar-item{
		height: 160rpx;
	}
	.ar-text{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.ar-box{
		display: flex;
	}
	.title-text{
		position:relative;
		margin: 23rpx 30rpx -20rpx;
		width: 128rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
		line-height: 30rpx;
	}
</style>
